<template>
    <el-table
            :data="data"
            style="width: 100%"
            @selection-change="handleSelectionChange"
            id="zTreeTable"
            ref="zTreeTable"
            row-key="id"
            class="tree-table"
    >
        <el-table-column
                type="selection"
                width="55">
        </el-table-column>
        <el-table-column v-for="(column, index) in columns"
                         :prop="column.prop"
                         :label="column.label"
                         :align="column.align"
                         :width="column.width"
                         :key="column.prop">
            <template slot-scope="scope">

                <template v-if="!column.render">
                    <template v-if="column.formatter">
                        <span v-html="column.formatter(scope.row, column)"/>
                    </template>
                    <template v-else>
                        <span>{{scope.row[column.prop]}}</span>
                    </template>
                </template>
                <template v-else>
                    <expand-dom :column="column" :row="scope.row" :render="column.render" :index="index"/>
                </template>
            </template>
        </el-table-column>

        <el-table-column :label="operates.title===undefined?'操作':operates.title" align="center"
                         :width="(operates.width===undefined||operates.width==='auto')?operates.list.length*100:operates.width"
                         :fixed="(device==='desktop')&&(operates.fixed===undefined?'right':operates.fixed)"
                         v-if="(operates.list.length > 0)"
        >
            <template slot-scope="scope">
                <div>
                    <template v-for="(btn, key) in operates.list">
                        <el-button :type="btn.type" size="mini" :icon="btn.icon"
                                   v-permission="btn.permission"
                                   :disabled="btn.disabled(scope.$index,scope.row)"
                                   :plain="btn.plain" @click.native.prevent="btn.method(key,scope.row)">{{
                            btn.label }}
                        </el-button>
                    </template>
                </div>
            </template>
        </el-table-column>
    </el-table>
</template>
<script lang="ts">
    import {Component, Prop, Vue} from "vue-property-decorator";
    import {Getter} from "vuex-class";

    @Component({
        components: {
            expandDom: {
                functional: true,
                props: {
                    row: Object,
                    render: Function,
                    index: Number,
                    column: {
                        type: Object,
                        default: null
                    }
                },
                render: (createElement, context) => {
                    //详细使用方法见 https://cn.vuejs.org/v2/guide/render-function.html#createElement-%E5%8F%82%E6%95%B0
                    const params = {
                        row: context.props.row,
                        index: context.props.index,
                        column: ""
                    };
                    if (context.props.column) {
                        params.column = context.props.column;
                    }
                    return context.props.render(createElement, params);
                }
            }
        }
    })
    export default class TreeTable extends Vue {

        @Prop()  // 这是相应的字段展示
        private columns!: Array<any>;
        @Prop()//这是数据源
        private data!: Array<any>;

        @Prop()//// width:按钮列宽，fixed：是否固定（left,right）,按钮集合 === label: 文本，type :类型（primary / success / warning / danger / info / text），show：是否显示，icon：按钮图标，plain：是否朴素按钮，disabled：是否禁用，method：回调方法
        private operates!: any;
        @Getter("device") private device!: string;
        private multipleSelection: Array<any> = [];// 多行选中
        // 多行选中
        handleSelectionChange(val) {
            this.multipleSelection = val;
            this.$emit("handleSelectionChange", val);
        }
    }
</script>
<style scoped>

</style>
